<ng-container *ngIf="cvcVariantId && (variant$ | ngrxPush) as variant">
  @switch (variant.__typename) {
    @case ('GeneVariant') {
      <ng-container
        *ngTemplateOutlet="
          coordinateCard;
          context: { $implicit: variant.coordinates, variant: variant }
        ">
      </ng-container>
    }
    @case ('FusionVariant') {
      <nz-row
        nzSpan="24"
        nzGutter="12">
        @if (variant.fivePrimeCoordinates) {
          <nz-col nzSpan="12">
            <nz-card>
              <nz-tabset [nzAnimated]="false">
                <nz-tab nzTitle="5' Partner Genomic Coordinates">
                  <ng-container
                    *ngTemplateOutlet="
                      coordinateCard;
                      context: {
                        $implicit: variant.fivePrimeCoordinates,
                        variant: variant
                      }
                    ">
                  </ng-container>
                </nz-tab>
                <nz-tab nzTitle="5' Partner Exon Coordinates">
                  <nz-card nzTitle="Start Exon Coordinates">
                    <ng-container
                      *ngTemplateOutlet="
                        exonCoordinateCard;
                        context: {
                          $implicit: variant.fivePrimeStartExonCoordinates,
                          variant: variant
                        }
                      ">
                    </ng-container>
                  </nz-card>
                  <nz-card nzTitle="End Exon Coordinates">
                    <ng-container
                      *ngTemplateOutlet="
                        exonCoordinateCard;
                        context: {
                          $implicit: variant.fivePrimeEndExonCoordinates,
                          variant: variant
                        }
                      ">
                    </ng-container>
                  </nz-card>
                </nz-tab>
              </nz-tabset>
            </nz-card>
          </nz-col>
        }
        @if (variant.threePrimeCoordinates) {
          <nz-col nzSpan="12">
            <nz-card>
              <nz-tabset [nzAnimated]="false">
                <nz-tab nzTitle="3' Partner Genomic Coordinates">
                  <ng-container
                    *ngTemplateOutlet="
                      coordinateCard;
                      context: {
                        $implicit: variant.threePrimeCoordinates,
                        variant: variant
                      }
                    ">
                  </ng-container>
                </nz-tab>
                <nz-tab nzTitle="3' Partner Exon Coordinates">
                  <nz-card nzTitle="Start Exon Coordinates">
                    <ng-container
                      *ngTemplateOutlet="
                        exonCoordinateCard;
                        context: {
                          $implicit: variant.threePrimeStartExonCoordinates,
                          variant: variant
                        }
                      ">
                    </ng-container>
                  </nz-card>
                  <nz-card nzTitle="End Exon Coordinates">
                    <ng-container
                      *ngTemplateOutlet="
                        exonCoordinateCard;
                        context: {
                          $implicit: variant.threePrimeEndExonCoordinates,
                          variant: variant
                        }
                      ">
                    </ng-container>
                  </nz-card>
                </nz-tab>
              </nz-tabset>
            </nz-card>
          </nz-col>
        }
      </nz-row>
    }
  }
</ng-container>
<ng-container *ngIf="cvcCoordinates">
  @switch (cvcCoordinates.__typename) {
    @case ('GeneVariant') {
      <nz-card
        [nzTitle]="
          displayTitle ? 'Representative Variant Coordinates' : undefined
        ">
        <ng-container
          *ngTemplateOutlet="
            coordinateCard;
            context: {
              $implicit: cvcCoordinates.coordinates,
              variant: cvcCoordinates
            }
          ">
        </ng-container>
      </nz-card>
    }
    @case ('FusionVariant') {
      <nz-row
        nzSpan="24"
        nzGutter="12">
        @if (cvcCoordinates.fivePrimeCoordinates) {
          <nz-col nzSpan="12">
            <nz-card>
              <nz-tabset [nzAnimated]="false">
                <nz-tab nzTitle="5' Partner Genomic Coordinates">
                  <ng-container
                    *ngTemplateOutlet="
                      coordinateCard;
                      context: {
                        $implicit: cvcCoordinates.fivePrimeCoordinates,
                        variant: cvcCoordinates
                      }
                    ">
                  </ng-container>
                </nz-tab>
                <nz-tab nzTitle="5' Partner Exon Coordinates">
                  <nz-card nzTitle="Start Exon Coordinates">
                    <ng-container
                      *ngTemplateOutlet="
                        exonCoordinateCard;
                        context: {
                          $implicit:
                            cvcCoordinates.fivePrimeStartExonCoordinates,
                          variant: cvcCoordinates
                        }
                      ">
                    </ng-container>
                  </nz-card>
                  <nz-card nzTitle="End Exon Coordinates">
                    <ng-container
                      *ngTemplateOutlet="
                        exonCoordinateCard;
                        context: {
                          $implicit:
                            cvcCoordinates.fivePrimeEndExonCoordinates,
                          variant: cvcCoordinates
                        }
                      ">
                    </ng-container>
                  </nz-card>
                </nz-tab>
              </nz-tabset>
            </nz-card>
          </nz-col>
        }
        @if (cvcCoordinates.threePrimeCoordinates) {
          <nz-col nzSpan="12">
            <nz-card>
              <nz-tabset [nzAnimated]="false">
                <nz-tab nzTitle="3' Partner Genomic Coordinates">
                  <ng-container
                    *ngTemplateOutlet="
                      coordinateCard;
                      context: {
                        $implicit: cvcCoordinates.threePrimeCoordinates,
                        variant: cvcCoordinates
                      }
                    ">
                  </ng-container>
                </nz-tab>
                <nz-tab nzTitle="3' Partner Exon Coordinates">
                  <nz-card nzTitle="Start Exon Coordinates">
                    <ng-container
                      *ngTemplateOutlet="
                        exonCoordinateCard;
                        context: {
                          $implicit:
                            cvcCoordinates.threePrimeStartExonCoordinates,
                          variant: cvcCoordinates
                        }
                      ">
                    </ng-container>
                  </nz-card>
                  <nz-card nzTitle="End Exon Coordinates">
                    <ng-container
                      *ngTemplateOutlet="
                        exonCoordinateCard;
                        context: {
                          $implicit:
                            cvcCoordinates.threePrimeEndExonCoordinates,
                          variant: cvcCoordinates
                        }
                      ">
                    </ng-container>
                  </nz-card>
                </nz-tab>
              </nz-tabset>
            </nz-card>
          </nz-col>
        }
      </nz-row>
    }
  }
</ng-container>

<ng-template #noneSpecified>
  <span
    nz-typography
    nzType="secondary">
    None specified
  </span>
</ng-template>

<ng-template
  #coordinateCard
  let-variant="variant"
  let-coords>
  <ng-template #noCoord>
    <span
      nz-typography
      nzType="secondary">
      <cvc-empty-revisable
        reviseFormPath="/variants/{{ variant.id }}/revise/suggest?variantType={{
          variant.__typename
        }}"
        notification="No coordinates specified">
      </cvc-empty-revisable>
    </span>
  </ng-template>
  @if (coords) {
    <!-- check for reference build, display empty msg if missing -->
    <ng-container *ngIf="coords.referenceBuild; else noCoord">
      <nz-descriptions
        nzLayout="horizontal"
        nzBordered="true"
        nzSize="small"
        [nzColumn]="{ xxl: 3, xl: 2, lg: 1, md: 1, sm: 1, xs: 1 }">
        <!-- ref build, ensembl version -->
        <nz-descriptions-item nzTitle="Ref. Build">
          <ng-container *ngIf="coords.referenceBuild; else noneSpecified">
            {{ coords.referenceBuild }}
          </ng-container>
        </nz-descriptions-item>

        <nz-descriptions-item nzTitle="Ensembl Version">
          <ng-container *ngIf="coords.ensemblVersion; else noneSpecified">
            {{ coords.ensemblVersion }}
          </ng-container>
        </nz-descriptions-item>

        <!-- representative transcript -->
        <nz-descriptions-item nzTitle="Transcript">
          <cvc-link-tag
            *ngIf="coords.representativeTranscript; else noneSpecified"
            tooltip="View on Ensembl"
            [href]="
              'http://grch37.ensembl.org/Homo_sapiens/transview?transcript=' +
              coords.representativeTranscript
            ">
            {{ coords.representativeTranscript }}
          </cvc-link-tag>
        </nz-descriptions-item>

        <!-- chr. -->
        <nz-descriptions-item nzTitle="Chr.">
          <ng-container *ngIf="coords.chromosome; else noneSpecified">
            {{ coords.chromosome }}
          </ng-container>
        </nz-descriptions-item>

        <!-- start -->
        <nz-descriptions-item nzTitle="Start">
          <ng-container *ngIf="coords.start; else noneSpecified">
            {{ coords.start }}
          </ng-container>
        </nz-descriptions-item>

        <!-- stop -->
        <nz-descriptions-item nzTitle="Stop">
          <ng-container *ngIf="coords.stop; else noneSpecified">
            {{ coords.stop }}
          </ng-container>
        </nz-descriptions-item>

        <ng-container>
          <!-- reference bases -->
          <nz-descriptions-item
            *ngIf="
              coords.coordinateType == coordinateTypes.GeneVariantCoordinate
            "
            nzTitle="Ref. Bases">
            <ng-container
              *ngIf="
                coords.chromosome && coords.start && coords.stop;
                else noneSpecified
              ">
              {{ coords.referenceBases | ifEmpty: '--' }}
            </ng-container>
          </nz-descriptions-item>

          <!-- variant bases-->
          <nz-descriptions-item
            *ngIf="
              coords.coordinateType == coordinateTypes.GeneVariantCoordinate
            "
            nzTitle="Var. Bases">
            <ng-container
              *ngIf="
                coords.chromosome && coords.start && coords.stop;
                else noneSpecified
              ">
              {{ coords.variantBases | ifEmpty: '--' }}
            </ng-container>
          </nz-descriptions-item>
        </ng-container>
      </nz-descriptions>
    </ng-container>
  } @else {
    <cvc-empty-revisable
      reviseFormPath="/variants/{{ variant.id }}/revise/suggest?variantType={{
        variant.__typename
      }}"
      notification="No coordinates specified">
    </cvc-empty-revisable>
  }
</ng-template>

<ng-template
  #exonCoordinateCard
  let-variant="variant"
  let-coords>
  <ng-template #noCoord>
    <span
      nz-typography
      nzType="secondary">
      <cvc-empty-revisable
        reviseFormPath="/variants/{{ variant.id }}/revise/suggest?variantType={{
          variant.__typename
        }}"
        notification="No coordinates specified">
      </cvc-empty-revisable>
    </span>
  </ng-template>
  @if (coords) {
    <!-- check for reference build, display empty msg if missing -->
    <ng-container *ngIf="coords.referenceBuild; else noCoord">
      <nz-descriptions
        nzLayout="horizontal"
        nzBordered="true"
        nzSize="small"
        [nzColumn]="{ xxl: 6, xl: 3, lg: 1, md: 1, sm: 1, xs: 1 }">
        <!-- exon number -->
        <nz-descriptions-item nzTitle="Exon">
          <ng-container *ngIf="coords.exon; else noneSpecified">
            {{ coords.exon }}
          </ng-container>
        </nz-descriptions-item>

        <!-- exon ensembl ID -->
        <nz-descriptions-item
          nzTitle="Exon ID"
          nzSpan="2">
          <cvc-link-tag
            *ngIf="coords.ensemblId; else noneSpecified"
            tooltip="View on Ensembl"
            [href]="
              'http://grch37.ensembl.org/Homo_sapiens/transview?exon=' +
              coords.ensemblId
            ">
            {{ coords.ensemblId }}
          </cvc-link-tag>
        </nz-descriptions-item>

        <!-- transcript -->
        <nz-descriptions-item
          nzTitle="Transcript"
          nzSpan="2">
          <cvc-link-tag
            *ngIf="coords.representativeTranscript; else noneSpecified"
            tooltip="View on Ensembl"
            [href]="
              'http://grch37.ensembl.org/Homo_sapiens/transview?transcript=' +
              coords.representativeTranscript
            ">
            {{ coords.representativeTranscript }}
          </cvc-link-tag>
        </nz-descriptions-item>

        <!-- strand -->
        <nz-descriptions-item nzTitle="Strand">
          <ng-container *ngIf="coords.strand; else noneSpecified">
            {{ coords.strand | enumToTitle }}
          </ng-container>
        </nz-descriptions-item>

        <!-- chr. -->
        <nz-descriptions-item nzTitle="Chr.">
          <ng-container *ngIf="coords.chromosome; else noneSpecified">
            {{ coords.chromosome }}
          </ng-container>
        </nz-descriptions-item>

        <!-- start -->
        <nz-descriptions-item
          nzTitle="Start"
          nzSpan="2">
          <ng-container *ngIf="coords.start; else noneSpecified">
            {{ coords.start }}
          </ng-container>
        </nz-descriptions-item>

        <!-- stop -->
        <nz-descriptions-item
          nzTitle="Stop"
          nzSpan="2">
          <ng-container *ngIf="coords.stop; else noneSpecified">
            {{ coords.stop }}
          </ng-container>
        </nz-descriptions-item>

        <!-- offset -->
        <nz-descriptions-item nzTitle="Offset">
          @if (coords.exonOffset && coords.exonOffsetDirection) {
            {{ coords.exonOffsetDirection | enumToTitle
            }}{{ coords.exonOffset }}
          } @else {
            0
          }
        </nz-descriptions-item>
      </nz-descriptions>
    </ng-container>
  } @else {
    <cvc-empty-revisable
      reviseFormPath="/variants/{{ variant.id }}/revise/suggest?variantType={{
        variant.__typename
      }}"
      notification="No coordinates specified">
    </cvc-empty-revisable>
  }
</ng-template>
